<template>
  <view class="my-settlement-component">
    <view class="select-all">
      <radio class="select-all-radio" color="#c00000" :checked="isSelectAll" @click="selectAllOrAgainst(!isSelectAll)"/>
      <text class="select-all-text">全选</text>
    </view>
    <view class="amount-to">
      <text>合计:</text>
      <text class="amount-to-text">￥{{ selectedPrice.toFixed(2) }}</text>
    </view>
    <view class="settlement">
      <button class="settlement-button" @click="settlement">结算({{ selectedQuantity }})</button>
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapActions } from 'vuex'
  export default {
    name:"MySettlement",
    data() {
      return {
        countdown: 3,
      };
    },
    computed: {
      selectedQuantity() {
        return this.$store.getters.selectedQuantity
      },
      selectedPrice() {
        return this.$store.getters.selectedPrice
      },
      isSelectAll() {
        return this.$store.getters.isSelectAll
      },
      ...mapState('user', ['token']),
      ...mapGetters('user', ['fullAddress'])
    },
    methods: {
      ...mapActions('user', ['updateRedirectInfo']),
      selectAllOrAgainst(mark) {
        this.$store.dispatch('selectAllOrAgainst', mark)
      },
      showTip(n) {
        uni.showToast({
          title: `请登录后再结算！${n}秒后自动跳转到登录页`,
          icon: 'none',
          duration: 1500,
          mask: true,
        })
      },
      settlement() {
        if(this.selectedQuantity === 0) {
          uni.showToast({
            title: '请勾选商品',
            icon: 'none'
          })
          return
        }
        if(this.fullAddress === '') {
          uni.showToast({
            title: '请选择收货地址',
            icon: 'none'
          })
          return
        }
        if(this.token === '') {
          this.showTip(this.countdown)
          this.intervalId = setInterval(() => {
            this.countdown--
            if(this.countdown <= 0) {
              clearInterval(this.intervalId)
              this.countdown = 3
              this.updateRedirectInfo({
                openType: 'switchTab',
                url: '/pages/cart/cart'
              })
              uni.switchTab({
                url: '/pages/my/my'
              })
              return
            }
            this.showTip(this.countdown)
          }, 1000)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.my-settlement-component {
  position: fixed;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20rpx;
  height: 100rpx;
  width: 750rpx;
  background-color: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  .select-all {
    display: flex;
    align-items: center;
  }
  .amount-to {
    .amount-to-text {
      color: #c00000;
    }
  }
  .settlement {
    height: 100%;
    .settlement-button {
      width: 200rpx;
      height: 100%;
      background-color: #c00000;
      border: none;
      border-radius: 0;
      color: white;
      font-size: 28rpx;
      line-height: 100rpx;
    }
  }
}
</style>